<template>
	<view class="index">
		<u-sticky :enable="enableSticky" offset-top="0" h5-nav-height="0">
			<u-tabs :list="hotTypeList" :current="current" @change="handleTabChange"></u-tabs>
		</u-sticky>
		<view class="list-empty" v-if="list.length == 0"><u-empty text="暂无更多数据" mode="list"></u-empty></view>
		<view class="list-content" v-else><article-item v-for="(item, index) in list" :article="item" /></view>
		<loading-view></loading-view>
	</view>
</template>

<script>
import { hotTypeList, loadingType } from '@/utils/dict.js';
import juejinApi from '@/api/juejin.js'
import { queryListPageFunc } from '@/utils/tools';
import { timeago, dateChangeFormat } from '@/utils/tools.js';

export default {
	data() {
		return {
			enableSticky: true,
			hotTypeList,
			current: 0,
			list: [],
			search: {
				page: 1,
				size: 30,
				status: loadingType.LOADING,
				keywords: ''
			}
		};
	},
	onShow() {
		this.enableSticky = true;
	},
	onHide() {
		this.enableSticky = false;
	},
	onLoad:function(){
		this.handleSearch();
	},
	onReachBottom: function() {
		this.searchPageList();
	},
	methods: {
		handleTabChange(e) {
			this.current = e;
			this.handleRefreshList();
		},
		handleSearch() {
			this.handleRefreshList();
		},
		handleRefreshList() {
			this.search.page = 1;
			this.list = [];
			this.search.status = loadingType.LOADING;
			this.$nextTick(() => {
				this.searchPageList();
			});
		},
		async searchPageList() {
			let { page, size, status, keywords } = this.search;
			const param = {
				category: this.hotTypeList[this.current].category
			};
			this.$showLoading()
			const res = await queryListPageFunc(juejinApi.resourcesGold, page, size, param, this.list, status);
			this.$hideLoading()
			if (!res) {
				return false;
			}
			this.search.page = res.page;
			this.list = res.dataList;
			this.search.status = res.status;
			
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	.index {
		.list-empty {
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
